<template>
	<view class="content" v-if="show">
		<view class="checkWrap" :style="'width:'+(barWidth+32)+'rpx'">
			<view class="title">
				<view>{{title}}</view>
				<!-- <view @tap="closeHumanCheckHandle">关闭</view> -->
			</view>
			<view class="checkBox">
				<view class="checkBar">
					<view class="slide">
						<view :class="'moveBac '+(isAnimation?'animation':'')+(isSuccess?' moveBacSuccess':'')"
							:style="'width:'+(blockLeft+6)+'rpx;background-color:'+swiperColor"></view>
						<view :class="(isSuccess?'swiperTipsSuccess':'swiperTips')">{{isSuccess?'校验成功':'请按住滑块，拖动到最右边'}}
						</view>
						<view :class="'swiperBlock '+(isAnimation?'animation':'')+(isSuccess?' successBlock':'') "
							:style="'left:'+blockLeft+'rpx'" @touchstart="touchstartHandle"
							@touchmove.stop.prevent="touchmoveHandle" @touchend="touchendHandle"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			swiperColor: {
				type: String,
				default: '#009cd0'
			},
			title: {
				type: String,
				default: '人机校验'
			},
			barWidth: {
				type: Number,
				default: 568
			}
		},
		data() {
			return {
				startInfo: {},
				blockLeft: 0,
				isAnimation: false,
				isSuccess: false
			};
		},
		computed: {
			trueMoveableW: function() {
				return this.barWidth - 86
			}
		},
		watch: {
			show: function(val) {
				if (!val) {
					this.blockLeft = 0
					this.isSuccess = false
				}
			}
		},
		created() {},
		mounted() {},
		methods: {
			//手指按下
			touchstartHandle({
				changedTouches
			}) {
				if (this.isSuccess) {
					return
				}
				this.isAnimation = false
				this.startInfo = changedTouches[0]
			},
			// 手指移动
			touchmoveHandle({
				changedTouches
			}) {
				if (this.isSuccess) {
					return
				}
				let blockLeft = changedTouches[0].clientX - this.startInfo.clientX
				let blockLeftRpx = blockLeft / (uni.upx2px(100) / 100)
				if (blockLeftRpx < 0) {
					this.blockLeft = 0
				} else {
					this.blockLeft = blockLeftRpx <= this.trueMoveableW ? blockLeftRpx : this.trueMoveableW
				}
			},
			// 手指离开
			touchendHandle(e) {
				if (this.isSuccess) {
					return
				}
				if (this.trueMoveableW === this.blockLeft) {
					this.isSuccess = true
					this.$emit('checkResult', {
						detail: 'success'
					})
				} else {
					this.isAnimation = true
					let timeid = setTimeout(() => {
						clearTimeout(timeid)
						this.isAnimation = false
					}, 500)
					this.blockLeft = 0
					this.$emit('checkResult', {
						detail: 'fail'
					})
				}
			},
			closeHumanCheckHandle() {
				this.$emit('close')
			}
		}
	};
</script>

<style scoped>
	view {
		box-sizing: border-box;
	}

	.content {
		position: fixed;
		background-color: rgb(51, 51, 51, 0.8);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1001;
	}

	.checkWrap {
		width: 600rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
		overflow: hidden;
		position: absolute;
		top: 450rpx;
		left: 100rpx;
	}

	.checkWrap .title {
		color: #808080;
		font-size: 30rpx;
		padding: 16rpx;
		display: flex;
		justify-content: space-between;
	}

	.checkWrap .checkBox {
		background-color: #f2f2f2;
	}

	.checkBox .checkBar {
		width: 100%;
		padding: 16rpx;
	}

	.checkBox .slide {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		border-radius: 8rpx;
		background-color: #dddddd;
		position: relative;
		font-size: 26rpx;
		overflow: hidden;
	}

	.moveBac {
		background-color: #009cd0;
		width: 100%;
		height: 100%;
	}

	.moveBacSuccess {
		background-color: #06a17e !important;
	}

	.swiperTips {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		color: #FFFFFF;
		text-align: center;
		background: -webkit-gradient(linear, left top, right top, color-stop(0, #4d4d4d), color-stop(.4, #4d4d4d), color-stop(.5, #fff), color-stop(.6, #4d4d4d), color-stop(1, #4d4d4d));
		animation: tipsBlinkan 3s infinite;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.swiperTipsSuccess {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		text-align: center;
		color: #FFFFFF;
	}

	.slide .swiperBlock {
		width: 86rpx;
		height: 100%;
		border-radius: 8rpx;
		background-color: #ffffff;
		/* box-shadow: 0 0 6px 1px #b3b3b3; */
		background-image: url('');
		background-repeat: no-repeat;
		background-size: 46rpx;
		background-position: center;
		position: absolute;
		left: 0px;
		top: 0;
		border: 1px solid #808080;
	}

	.successBlock {
		background-image: url('') !important;
	}

	.animation {
		transition: all 0.5s;
	}

	@keyframes tipsBlinkan {
		0% {
			background-position: -200rpx 0;
		}

		100% {
			background-position: 200rpx 0;
		}
	}
</style>
